<template>
  <!-- 庭审大数据 -->
  <div class="main">
    <div class="left ">
      <box style="height: 320px" title="电子送达案件主要案由发布">
        <!-- <barChart :title="electronPersonOfMonth_title" :data='allData.electronPersonOfMonth'   ></barChart> -->
        <!--        <barLineChart :data='allData.electronPersonOfMonth' :title="electronPersonOfMonth_title"></barLineChart>-->
        <div class="leftEcharts ">
          <div v-for="({ isTitle, dataNumber, bottomTitle, topTitle }) in ElectronicDistribution"
            class="leftEchartsChildren ">
            <LeftView :bottom-title="bottomTitle || ''" :dataNumber="dataNumber" :is-title="isTitle" :shareNumber="25"
              :top-title="topTitle" />
          </div>
        </div>
      </box>
      <box style="flex: 1" title="电子送达占比情况">
        <!--        <pieChart :data='allData.briefDataList' :title="briefDataListTilte"></pieChart>-->
        <div class="leftEcharts">
          <LineView :data="electronCountData" />
        </div>
      </box>
    </div>
    <div class="center ">
      <box>
        <!--        <centerBox :data="allData.courtData " :data_top="allData" :title="centerTitle_2" :title_top="centerTitle_1"></centerBox>-->
        <centerBox :data="allData.courtData" :title="centerTitle_2" :title_top="centerTitle_1"></centerBox>
      </box>
    </div>
    <div class="right ">
      <box style="flex: 1" title="送达方式">
        <listTableCopy :data='ModeOfService'></listTableCopy>
      </box>
      <box style="flex: 1" title="电子送达比例">
        <!-- <listTable :data='allData' :title="electronNum_title"></listTable> -->
        <div class="MeterViews " style="">
          <div class="MeterViewsChild ">
            <div class="MeterViewsChildItem ">
              <MeterView :dataNumber="ElectronicsendRatio.electronicPercent" :shareNumber="20"
                bgImgUrl="src/assets/image/echartBgImg/MeterViewBgImg1.png" color="#8AFFFB" />
            </div>
            <span class="MeterViewsChildTitle">电子送达比例</span>
          </div>
          <div class="MeterViewsChild">
            <div class="MeterViewsChildItem ">
              <MeterView :dataNumber="ElectronicsendRatio.otherPercent" :shareNumber="20"
                bgImgUrl="src/assets/image/echartBgImg/MeterViewBgImg2.png" color="#74B4F0" />
            </div>
            <span class="MeterViewsChildTitle">其他送达比例</span>
          </div>
        </div>
      </box>
      <box style="flex: 1" title="买卖合同数据统计">
        <listTableCopy :data='businessCountList'></listTableCopy>
      </box>
    </div>
  </div>
</template>
<script>
import { sendData } from '@/api/index.js'
import { sendCaseList, sendNumberList, businessCount, electronCount } from "@/api/newIndex";
import box from '_components/box/index.vue'
import echarts from '_components/echarts/echarts.vue'
import listTable from '@/views/boxContent/listTable.vue'
import listTableCopy from '@/views/boxContent/listTableCopy.vue'
import pieChart from '@/views/boxContent/pieChart.vue'
import barChart from '@/views/boxContent/barChart.vue'
import barLineChart from '@/views/boxContent/barLineChart.vue'

import lineChart from '@/views/boxContent/lineChart.vue'
import semiCircleChart from '@/views/boxContent/semiCircleChart.vue'
import centerBox from '@/views/boxContent/centerBox.vue'
import { MeterView, LeftView, LineView } from "@/components/echartsViews";
export default {
  name: 'bigDataCourt',
  components: {
    box,
    echarts,
    listTable,
    pieChart,
    barChart,
    lineChart,
    semiCircleChart,
    centerBox,
    barLineChart,
    MeterView,
    LeftView,
    LineView,
    listTableCopy
  },
  data() {
    return {

      // 各审判阶段全在线案件数:	stageData
      personNumDataTitle: [
        { name: "总人次", value: "allPersonNum" },
        { name: "厦门以外地区人数", value: "duration" },
        { name: "累计减少群众开庭往返次数", value: "partPersonNum" },
        { name: "节约群众时间", value: "trialNum" },
      ],
      briefDataListTilte: ['name', 'num'],
      //案由分布
      trialBriefDataList: [],
      trialBriefDataListTilte: ['name', 'num'],
      //全在线诉讼平台案件量（月份显示）
      caseNumDataOfMonth: [],
      caseNumTitle: [
        'month', 'num'
      ],
      //适用率（送达适用率、庭审适用率）num
      electronPersonOfMonth: [],
      electronPersonOfMonth_title: [
        { name: "month", }, { name: 'num', legendName: "所有" }, { name: 'dzNum', legendName: "电子送达案件" }, { name: 'percent', legendName: "占比" }],
      //送达周期
      sendCycle: [],
      sendCycleTitle: ['value', 'name',],
      // 审限周期 ：trialCycle
      trialCycle: [],
      trialCycleTitle: ['value', 'name'],

      // 案件总数：
      allCaseCount: 0,
      // 服务人数：
      allPersonCount: 0,
      // 殿前，院部。禾山。自贸区：courtData
      // dqCount: 65,  殿前法庭
      // ybCount: 55,  院部
      // hsCount: 53,   禾山法庭
      // zmqCount: 32  自贸区法庭

      centerTitle_1: [
        { name: "2022年度全在线案件数", value: 'electronSendCaseNum', unit: '件' },
        { name: "电子送达比例", value: 'electronPercent', unit: '%' },
        { name: "平台累计发出电子诉讼文书", value: 'electronFileCount', unit: '份' },

      ],
      centerTitle_2: [
        { name: "殿前法庭", value: 'dqCount' },
        { name: "院部", value: 'ybCount' },
        { name: "禾山法庭", value: 'hsCount' },
        { name: "自贸区法庭", value: 'zmqCount' },
      ],
      allData: {
        courtData: {
          dqCount: 0,
          hsCount: 0,
          ybCount: 0,
          zmqCount: 0
        },
      },
      //送达时效
      // 送达方式
      agingData_title: [
        { name: "平均送达时效", value: "average" },
        { name: "所有送达", value: "all" },
        { name: "电子送达", value: "electron" },
      ],
      //电子文书发出量
      //电子送达比例
      electronNum_title: [
        { name: "庭前送达文书", value: "beforeFileCount" },
        { name: "裁判文书", value: "judgmentCount" },
      ],
      //电子送达服务群众(含诉讼代理人)
      //买卖合同数据统计
      personData_title: [
        { name: "总人次", value: "allPersonNum" },
        { name: "厦门以外地区人次", value: "partPersonNum" },
      ],
      /**2022年12月15日11:51:51 新  */
      /**   电子送达比例*/
      ElectronicsendRatio: {
        electronicPercent: 0,
        otherPercent: 0,
      },
      /**电子送达案件主要案由分布*/
      ElectronicDistribution: [
        { isTitle: "案件数", topTitle: '件' },
        { isTitle: "送达次数", topTitle: '次' },
        { isTitle: "电子送达件数", topTitle: '件', bottomTitle: '30%' },
        { isTitle: "电子送达次数", topTitle: '次' },
        { isTitle: "平均送达周期", topTitle: '天' },
        { isTitle: "送达完成", topTitle: '件', bottomTitle: '30%' },
      ],
      /**送达方式*/
      ModeOfService: [
        { title: '总送达次数', value: 0, unit: '次' },
        { title: '电子送达', value: 0, unit: '次' },
        { title: '上门送达', value: 0, unit: '次' },
        { title: '现场领取', value: 0, unit: '次' },
        { title: '公告送达', value: 0, unit: '次' },
        { title: '委托送达', value: 0, unit: '次' },
      ],
      /**买卖合同数据统计*/
      businessCountList: [
        { title: '送达总数', value: 0, unit: '次' },
        { title: '电子送达数', value: 0, unit: '次' },
        { title: '电子送达占比', value: 0, unit: '%' },
        { title: '平均送达周期', value: 0, unit: '天' },
      ],
      /**电子送达占比情况*/
      electronCountData: []
    }
  },
  props: {
  },

  created() {
    this.getData()
    this.centerTitle_1[0].name = `${this.$store.state.year}年度全在线案件数`

  },
  mounted() {
  },
  watch: {
    "$store.state.year"(a) {
      this.getData()
      this.centerTitle_1[0].name = `${a}年度全在线案件数`

    }
  },
  methods: {
    getData() {
      const params = {
        year: this.$store.state.year
      }
      this.sendCaseListCopy(params)
      this.sendNumberListCopy(params)
      this.businessCountCopy(params)
      this.electronCountCopy(params)
    },
    // 电子送达案件主要案由分布，中间的大模块数据，与电子送达比例共用一个接口
    sendCaseListCopy(params) {
      sendCaseList(params).then(({ data, message, state }) => {
        if (Number(state) === 100) {
          this.createElectronicsendRatio(data)
          this.createElectronicDistribution(data)
          this.createCourtData(data)
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    // 电子送达比例
    createElectronicsendRatio(data) {
      const { electronicPercent, otherPercent } = data
      this.ElectronicsendRatio.electronicPercent = Number(electronicPercent.replace('%', ''))
      this.ElectronicsendRatio.otherPercent = Number(otherPercent.replace('%', ''))
    },
    // 电子送达案件主要案由分布
    createElectronicDistribution(data) {
      const { sendCount, electronSendCaseNum, sendEndConut, agingData: { electron, all, average } } = data
      this.ElectronicDistribution[0].topTitle = `${sendCount}件`
      this.ElectronicDistribution[1].topTitle = `${all}次`
      this.ElectronicDistribution[2].topTitle = `${electronSendCaseNum}件`
      this.ElectronicDistribution[2].bottomTitle = `${((electronSendCaseNum / sendCount) * 100).toFixed(0)}%`
      this.ElectronicDistribution[3].topTitle = `${electron}次`
      this.ElectronicDistribution[4].topTitle = `${average}天`
      this.ElectronicDistribution[5].topTitle = `${sendEndConut}件`
      this.ElectronicDistribution[5].bottomTitle = `${((sendEndConut / sendCount) * 100).toFixed(0)}%`
    },
    // 电子送达占比情况
    electronCountCopy(params) {
      electronCount(params).then(({ data, message, state }) => {
        if (Number(state) === 100) {
          this.electronCountData = data
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    // 中间地图数据
    createCourtData(data) {
      const { ybSendConut, dqSendConut, hsSendConut, zmSendConut } = data
      this.allData.courtData = {
        dqCount: dqSendConut,
        hsCount: hsSendConut,
        ybCount: ybSendConut,
        zmqCount: zmSendConut
      }
    },

    //   送达方式
    sendNumberListCopy(params) {
      sendNumberList(params).then(({ data, message, state }) => {
        if (Number(state) === 100) {
          this.createModeOfService(data)
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    createModeOfService(data) {
      const { electronicSendCount, entrustSendCount, noticeSendCount, sendNumberCount, onSiteSendCount, outSendCount } = data
      this.ModeOfService[0].value = sendNumberCount
      this.ModeOfService[1].value = electronicSendCount
      this.ModeOfService[2].value = outSendCount
      this.ModeOfService[3].value = onSiteSendCount
      this.ModeOfService[4].value = noticeSendCount
      this.ModeOfService[5].value = entrustSendCount
    },
    //   买卖合同数据统计
    businessCountCopy(params) {
      businessCount(params).then(({ data, message, state }) => {
        if (Number(state) === 100) {
          this.createBusinessCount(data)
        }
      })
        .catch(err => {
          console.log(err)
        })
    },
    createBusinessCount(data) {
      const { businessAverageData, businessCaseNumber, businessElectronicNumber, electronicPercent } = data
      this.businessCountList[0].value = businessCaseNumber
      this.businessCountList[1].value = businessElectronicNumber
      this.businessCountList[2].value = Number(electronicPercent.replace('%', ''))
      this.businessCountList[3].value = businessAverageData
    },
  }
}
</script>

<style scoped >
.center>>>.box {
  background-image: url(@/assets/image/framebigcenter.png);
  background-size: 100% 100%;
  border: none;
  height: 100%;



}

.center {
  /* width: 42%; */
  flex: 10;
  overflow: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.left,
.right {
  flex: 6;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  /*防止无动画*/
  /*border: 1px solid rgb(0, 0, 0, 0);*/
}

.main {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.MeterViews {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.MeterViewsChild {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.MeterViewsChildItem {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
}

.MeterViewsChildTitle {
  font-weight: 400;
  margin-top: 15px;
}

.leftEcharts {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.leftEchartsChildren {
  width: 30%;
  height: 120px;
  display: flex;
  flex-direction: column;
}
</style>
